<template>
 <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="handleAdd">添加员工</el-button>
      </el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-table
    :data="employee"
    style="width: 100%">
      <el-table-column
        prop="name"
        label="名字">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        label="任职情况">
        <template slot-scope="scope">
          <el-tag :type="scope.row.endTime == null ?'success':'info'">{{ scope.row.endTime == null ?'在职':'离职' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="admin"
        label="登录权限">
        <template slot-scope="scope">
            <div>{{ scope.row.admin ==1 ? '有权限' :'没权限' }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="idcard"
        label="身份证号">
      </el-table-column>
      <el-table-column
        prop="work"
        label="工作内容">
      </el-table-column>
      <el-table-column
        prop="address"
        label="家庭地址">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="入职时间">
      </el-table-column> 
      <el-table-column
        prop="endTime"
        label="离职时间">
      </el-table-column>  
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button type="text" size="small" :disabled="scope.row.endTime == null ? false : true" @click="handleAdd(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pager">
      <el-pagination
      background
      layout="prev, pager, next,total"
      :total="total"
      :page-size="pageData.pageSize"
      @current-change="handlePage">
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
import { del, getPage } from '@/api/employee'
import Cookie from 'js-cookie';
export default {
  name:'',
  components: {  },
  data() {
    return {
        employee:[],
        pageData:{
          page:1,
          pageSize:12,
        },
        total:0,
        modalType:0,//0为更新，1为修改
    }
  },
  methods:{
    handlePage(val){
      // console.log(val,'val');
        this.pageData.page = val
        this.getList()
      },
    getList(){
      getPage({params:this.pageData}).then(config=>{
        let {data} = config
        // console.log('员工数据----',data);
        if(data.code === 1){
          this.employee = data.data.records
          this.total = data.data.total
        }
      }).catch(err =>{
        this.$message.error('后端服务器出问题了',err)
      })
    },
    handleAdd(row){
      if(row.id){
        this.modalType = 1
        Cookie.set('modalType',this.modalType)
        Cookie.set('row',JSON.stringify(row))
      }
      Cookie.set('modalType',this.modalType)
      this.$router.push({name:'AddEmp'})
    },
    handleDelete(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del({params:{id}}).then((config) => {
          let {data} = config
          console.log('删除的数据----',data);

              if(data.code ===1){
                this.$message.success(data.data)
              }else{
                this.$message.error(data.msg)
              }
              this.getList()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
    },
  },
  mounted(){
    this.getList()
  }
}
</script>

<style lang="less" scoped>

.pager{
    position: absolute;
    bottom: 30px;
    // right: 20px;
    left: 50%;
  }
</style>